<template>
  <div>
    <div class="top">
      <van-cell is-link @click="showPopup">{{xuenian}}</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <van-picker
          title="请选择学年"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-popup>
    </div>

    <div id="calendar" class="lt">
      <ul class="weekdays">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li style="color:red">六</li>
        <li style="color:red">日</li>
      </ul>
      <div></div>
      <div class="arrDays">
        <div
          v-for="(dayList,index) in newarry"
          :key="index"
          :class="(6<=index && index<=7||index==4)?'calendarData':''"
        >
          {{dayList.text}}
          <div style class="years">
            <div style="text-algin:center;background">
              {{dayList.year}}年{{dayList.moth}} 月
              <span
                v-show="(2<=index && index<=6)?true:false"
                class="home"
              >第二学期</span>
               <span
                v-show="(index==4)?true:false"
                class="home"
                 :class="(6<=index && index<=7)?'calendarData':''">(文艺艺术节月)</span>
              <!-- <br/> -->
            </div>

            <span style="display: none;">
              <span class="timeHide" v-if="dayList.moth>9">{{dayList.year}}-{{dayList.moth}}</span>
              <span v-else class="timeHide">{{dayList.year}}--{{dayList.moth}}</span>
            </span>
          </div>
          <ul class="days">
            <li v-for="(day,index) in dayList.days" :key="index" id="danzou">
              <!--@click="selectDay()" -->
              <!--今天-->
              <span v-if="day!=''">
                <span
                  v-if="day.getFullYear() == new Date().getFullYear() 
                                                   && day.getMonth() == new Date().getMonth() 
                                                   && day.getDate() == new Date().getDate()"
                  class="curDay"
                >{{day.getDate()}}</span>
                <span v-else class="curDay">
                  {{day.getDate()}}
                  <!-- 判断每月有哪些好是节假日 -->
                  <span v-if="day.getMonth()==0&&day.getDate()==1" class="daymoth">元旦</span>
                  <span v-if="day.getMonth()==2&&day.getDate()==8" class="daymoth">妇女节</span>
                  <span v-if="day.getMonth()==3&&day.getDate()==5" class="daymoth">清明节</span>
                  <span v-if="day.getMonth()==4&&day.getDate()==1" class="daymoth">劳动节</span>
                  <span v-if="day.getMonth()==4&&day.getDate()==4" class="daymoth">青年节</span>
                  <span v-if="day.getMonth()==5&&day.getDate()==1" class="daymoth">儿童节</span>
                  <span v-if="day.getMonth()==6&&day.getDate()==1" class="daymoth">建军节</span>
                   <!-- <span v-if="(day.getMonth()==6)&&(day.getMonth()<=7)" class="daymoth">行课</span> -->
                    <span v-if="day.getMonth()==7&&(day.getDate()==31)" class="daymoth">行课</span>
                   <span v-if="(day.getMonth()==8&&(day.getDate()<=9))" class="daymoth">行课</span>
                    <span v-if="(day.getMonth()==8&&(day.getDate()==10))" class="daymoth">教师节</span>
                    <span v-if="(day.getMonth()==8&&(day.getDate()>10))" class="daymoth">行课</span>
                  <span v-if="day.getMonth()==9&&(day.getDate()<=7)" class="daymoth">国庆节</span>
                    <span v-if="(day.getMonth()==3&&(day.getDate()>=8))&&(day.getMonth()==3&&(day.getDate()<=9))" class="daymoth">运动会(成)</span>
                    <span v-if="(day.getMonth()==3&&(day.getDate()>=22))&&(day.getMonth()==3&&(day.getDate()<=23))" class="daymoth">运动会(绵)</span>
                  <span v-if="(day.getMonth()==6&&(day.getDate()>=5))&&(day.getMonth()==6&&(day.getDate()<=18))" class="daymoth">考试</span>
                  <span v-if="(day.getMonth()==6&&(day.getDate()>=19))&&(day.getMonth()==6&&(day.getDate()<=31))" class="daymoth">放假</span>
                    <span v-if="(day.getMonth()==7&&day.getDate()<=27)" class="daymoth">放假</span>
                    <span v-if="(day.getMonth()==7&&(day.getDate()>=28))&&(day.getMonth()==7&&(day.getDate()<=30))" class="daymoth">报道</span>
                  <span v-if="day.getMonth()==9&&(day.getDate()>=8)" class="daymoth">行课</span>
                  <span v-if="day.getMonth()>=10" class="daymoth">行课</span>
                </span>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
.daymoth {
  // background: red;
  position: relative;
  top: -33px;
  left: 0px;
  font-size: 10px !important;
  color: red !important;
  overflow: hidden;
  overflow-y: scroll;
  height: 20px;
}
.calendarData li {
  background:plum;
}
#calendar {
  border: 1px solid #dfe6ec;
  width: 100%;
  background-image: url("../images/schoolMotto.png");
}
#danzou {
  height: 40px;
  span {
    font-size: 20px;
  }
  /* overflow: hidden; */
  /* width:100px; */
  /* background: chartreuse; */
  /* color: red; */
  /* overflow-y: hidden;
    overflow-y: scroll;
    text-align: center; */
}
.home {
  position: relative;
  top: 5px;
  font-size: 20px;
  z-index: 10;
  left:20%;
}
.month {
  width: 420px;
  background: #eef1f6;
}

.month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  color: #374453;
}

.year-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/*.year-month:hover {
      background: rgba(150, 2, 12, 0.1);
  }*/

.choose-year {
  padding-left: 20px;
  padding-right: 20px;
}

.choose-month {
  text-align: center;
  font-size: 16px;
}

.arrow {
  padding: 30px;
}
.month ul li {
  color: #374453;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.weekdays {
  margin: 0;
  padding: 0px 0;

  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  justify-content: space-around;
  width: 100%;
  color: #374453;
  background: #eef1f6;
}

.weekdays li {
  /* display: inline-block; */
  width: 50px;
  text-align: center;
}

.days {
  padding: 0;
  background: #ffffff;
  opacity: 0.9;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 420px;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  font-size: 1rem;
}
.days li span {
  display: inline-block;
  color: #000;
  cursor: pointer;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  width: 50px;
  // border-radius: 25px;
}
.days li span .active {
  width: 50px;
  // border-radius: 25px;
  background: #0097ff;
  color: #fff;
  display: inline-block;
}
// .days li span .daymoth:hover {
//   width: 50px;
//   // border-radius: 25px;
//   background: #0097ff;
//   color: #fff;
//   display: inline-block;
// }

.days li .other-month {
  padding: 5px;
  color: darkgrey;
}

.days li span:hover {
  // background: #0097ff;
  // color: #ffffff;
}
.arrDays {
  height: 458px;
  overflow-y: auto;
}
.years {
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
  color: #0097ff;
}
</style>

<script>
import $ from "jquery";
import Vue from "vue";
import { Popup } from "vant";
import { Picker } from "vant";
import { Toast } from "vant";
Vue.use(Picker);
Vue.use(Popup);
Vue.use(Toast);
export default {
  data() {
    return {
      currentDay: "",
      currentMonth: "",
      currentYear: "",
      currentWeek: "",
      days: [],
      yy: "",
      thisYear: null,
      thisMonth: null,
      arrDays: [],
      xuenian: "第一学年",
      columns: ["第一学年", "第二学年"],
      show: false,
      newarry: []
    };
  },
  mounted() {
    var date = new Date();
    self.currentDay = date.getDate();
    self.currentYear = date.getFullYear();
    self.currentMonth = date.getMonth() + 1;
    self.currentWeek = date.getDay(); // 1...6,0
    this.days = [];
    var month = date.getMonth() - 1;
    var year = date.getFullYear();
    this.yy = year;
    console.log("当前数组" + this.arrDays);
    for (var i = 0; i < 14; i++) {
      console.log("当前月份" + month);
      if (i == 0) {
        this.initData("2021-01-01 00:00:00"); //获取当前时间
      } else {
        if (month > 12) {
          this.initData(this.formatDate(year + 1, month - 12, 1));
        } else {
          this.initData(this.formatDate(year, month, 1));
        }
      }
      month += 1;
      // for(let ){

      // }
      // console.log("则his"+$("#days li").length)
    }

    $("#calendar").on("click", ".curDay", function() {
      console.log("点击了当前对象");
      $(this).addClass("active");
      let newyer; //点击时选中的是具体的年月
      console.log(
        $(this)
          .parents(".days")
          .siblings(".years")
          .find(".timeHide")
          .text()
          .replace(/(^\s*)|(\s*$)/g, "")
      );
      newyer = $(this)
        .parents(".days")
        .siblings(".years")
        .find(".timeHide")
        .text()
        .replace(/(^\s*)|(\s*$)/g, "");
      console.log("具体的年月" + newyer);
      //  console.log()
      $(this)
        .parents("li")
        .siblings()
        .find(".curDay")
        .removeClass("active");
      $(this)
        .parents(".calendarData")
        .siblings()
        .find(".curDay")
        .removeClass("active");
    });
    $("#danzou").on("click", "li", function() {
      alert($(this).text());
    });
    this.arrnn();
    this.fangjia();
  },
  methods: {
    //放假时间段的背景颜色
    updata(e) {
      console.log(e);
      console.log("这还少" + e.targe);
    },
    fangjia() {
      console.log(this.newarry[1].days.length);
      // if(this.newarry[1].days=="0"){
      //   console.log("今天是第二十八号")
      // }
      // if(this.newarry[1]){
      //   console.log(this.newarry[1].moth)
      //   // return this.newarry[1].days[0].value==4

      //   //  if(i=1){
      //   //      this.$set(this.newarry[1],2,5)
      //   //  }
      //   // if(this.newarry[1].moth&&this.newarry[1].days[0]){
      //   //   console.log(this.newarry[1].moth)

      //   // }
      //    const d = new Date(this.newarry[1].days[0])
      // //拼接成2020-06
      //    console.log(d)
      // }
    },
    onConfirm(value, index) {
      Toast(`当前学年：${value}`);
      this.xuenian = this.columns[index];
    },
    onChange(picker, value, index) {
      Toast(`当前学年：${value}`);
      this.xuenian = this.columns[index];
    },
    onCancel() {
      Toast("取消");
    },

    addInfo() {
      //
      this.isShow = !this.isShow;
    },

    showPopup() {
      this.show = true;
    },
    closeModel() {
      this.isShow = !this.isShow;
    },
    arrnn() {
      if (this.xuenian == "第一学年") {
        this.newarry = this.arrDays.slice(0, 12);
      }
      if (this.xuenian == "第二学年") {
        this.newarry = this.arrDays.slice(7, 14);
      }
    },
    initData(cur) {
      var self = this;
      var date = new Date(cur);
      var currentDay = date.getDate();
      var currentYear = date.getFullYear();
      var currentMonth = date.getMonth() + 1;
      var currentWeek = date.getDay(); // 1...6,0

      if (currentWeek == 0) {
        //星期天
        currentWeek = 7;
      }
      var str = this.formatDate(currentYear, currentMonth, currentDay);
      var arr = [];
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      for (let i = currentWeek - 1; i >= 0; i--) {
        let d = new Date(str);
        d.setDate(d.getDate() - i);
        if (i == 0) {
          arr.push(d);
        } else {
          arr.push("");
        }
      }
      for (let i = 1; i <= 42 - currentWeek; i++) {
        let d = new Date(str);
        d.setDate(d.getDate() + i);
        console.log(d.getDate);

        if (currentMonth == d.getMonth() + 1) {
          //    if(d.getMonth()==1&&d.getDate()==10){

          //     return  d.getMonth()=="2"
          //   alert("今天是"+d.getMonth()+"号"+d.getDate())
          //    return "555"
          // }
          arr.push(d);
        }
      }
      var obj = {};
      obj.moth = currentMonth;
      obj.days = arr;
      obj.year = currentYear;
      self.arrDays.push(obj);

      console.log(self.arrDays[0].moth);
      console.log("self.arrDays[0].moth" + self.arrDays[0].moth);
      console.log(
        "self.arrDays[0].days[5].getDate()" + self.arrDays[0].days[5].getDate()
      );
      // if(self.arrDays[0].moth==1 && self.arrDays[0].days[5].getDate()==4){
      //   self.$set(self.arrDays[0],'moth',1000)
      // }

      console.log("cs" + self.arrDays[0].days[5].getDate());
      //     if(self.arrDays[0].days[5].getDate()==2){
      //  console.log('cs'+self.arrDays[0].days[5].getDate())
      //      self.$set(self.arrDays[0].days,10,10)
      //     }
      // console.log('今天是几号'+self.arrDays[0].day)
    },
    formatDate(year, month, day) {
      var y = year;
      var m = month;
      if (m < 10) m = "0" + m;
      var d = day;
      if (d < 10) d = "0" + d;
      console.log(d);
      return y + "-" + m + "-" + d;
    }
  }
};
</script>